<template lang="pug">
    div(class="home-index")
        skin(@up="up",@down="down",@yes="yes",@back="back")
            div(class="flex-column",v-if="lockStatus == 0")
                div(class="flex-row index-top flex-column-item")
                    div(class="flex-row-item")
                        span(class="battery")
                            i(class="iconfont") &#xe685;
                    div(class="flex-row-item center")
                        span {{clock | format("HH:mm")}}
                    div(class="flex-row-item")
                        span(class="-key", v-if="isLocked")
                            i(class="iconfont") &#xe676;

                div(class="flex-column-item flex-2 flex-center-center", v-if="!infusionStopped")
                    span(class="h1" v-if="!squareWareTasking") 
                        span {{tempororyRateOn ? '临基输注中': '基础输注中'}}...
                    span(class="h1" v-if="squareWareTasking") 方波输注中...
                    plan-icon(:plan="planUsing")
                div(class="flex-column-item flex-center-center flex-2",v-if="infusionStopped")
                    span(class="h3") 暂停中!!!

                div(class="flex-column-item",v-if="infusionStopped")
                    span(class="h3") 暂停在: {{infusionStopAt | format('HH:mm')}}
                div(class="flex-column-item",v-else)
                    div(class="flex-row flex-column-item", style="padding: 0 10px")
                        div(class="flex-row-item left",v-if="!squareWareTasking")
                            span {{currentHourAmount}}U/h
                        div(class="flex-row-item",style="text-align:left;",v-else)
                            span {{squareWareLeaveTime}}分
                        div(class="flex-row-item right")
                            span {{remainingAmount}}U

            <!---->
            div(class="flex-column h3",v-if="lockStatus==1")
                div(class="flex-column-item flex-center-center")
                div(class="flex-column-item flex-center-center")
                    span 先按↑
                div(class="flex-column-item flex-center-center")
                    span 再按↓解锁
                div(class="flex-column-item flex-center-center")


            <!---->
            div(class="index-warning h3",v-if="lockStatus==2")
                span(style="") 按↓解锁

            <!---->
            div(class="flex-column h3",v-if="lockStatus==3")
                div(class="flex-column-item flex-center-center")
                    span 按↓锁定

            control-dialog(title="按↑取消暂停",sub-title="",:visible="dialogVisible")

</template>

<script>
    import GlobalService from "@/Service/GlobalService";

    const globalService = new GlobalService();

    import dayjs from 'dayjs'
    import Base from '@/mixins/BaseVue'

    export default {
        mixins: [Base],
        data() {
            return {
                isLocked: globalService.isScreenLocked(),
                /**
                 * 锁定状态
                 * 0-未锁定
                 * 1-按下 yes或者back
                 * 2-按下 上
                 * 3-按下 下
                 */
                lockStatus: 0,
                timer: null,

                squareWareTasking: window.dose.squareWare.tasking,
                dialogVisible: false,
                infusionStopped: window.dose.infusionStopped,
                infusionStopAt: window.dose.infusionStopAt,
                interval: null,
                clock: dayjs(),
                squareWareLeaveTime: 0, // 方波还剩下时间
                currentHourAmount: 0,// 当前小时的基础剂量是多少
                planUsing: window.rate.planUsing,
                tempororyRateOn: window.rate.temp.isOn
            };
        },
        computed: {
            remainingAmount() {
                let usedAmount = 0;
                const today = dayjs().format("YYYYMMDD")
                window.dose.records.forEach(item => {
                    if (dayjs(item.date).format("YYYYMMDD") == today) usedAmount = (usedAmount * 10 + item.amount * 10) / 10;
                })

                return (window.dose.remainingAmount * 10 - usedAmount * 10) / 10; // 胰岛素剩余量
            }
        },
        methods: {
            up() {
                if (globalService.isScreenLocked()) {
                    // 刚按下上按钮，或者已按下下再按上
                    if (this.lockStatus == 0 || this.lockStatus == 1) {
                        this.lockStatus = 2;
                    }
                }
                if (window.dose.infusionStopped && this.dialogVisible) {
                    window.dose.infusionStopped = false;
                    this.infusionStopped = false;
                    this.dialogVisible = false;
                } else {
                    this.lockStatus = 3; // 提示按下↓锁定
                }
            },
            down() {
                if (globalService.isScreenLocked() && this.lockStatus == 0) {
                    this.lockStatus = 1;
                } else if (
                    globalService.isScreenLocked() &&
                    (this.lockStatus == 2 || this.lockStatus == 3)
                ) {
                    this.unLockScreen();
                } else if (window.dose.infusionStopped && this.lockStatus != 3) {
                    return;
                }

                if (!globalService.isScreenLocked() && this.lockStatus == 3) {
                    // 锁定并返回首页
                    this.lockScreen();
                }
            },

            back() {
                if (globalService.isScreenLocked()) {
                    // 锁定中逻辑
                    this.lockScreen();
                } else {
                    this.$router.push("/home/statistics");
                }
            },
            yes() {
                if (globalService.isScreenLocked()) {
                    // 锁定中逻辑
                    this.lockScreen();
                } else if (window.dose.infusionStopped) {
                    this.$router.push('/menu/start')
                } else {
                    this.$router.push("/menu");
                }
            },

            lockScreen() {
                globalService.ScreenLock();
                this.isLocked = true;
                this.lockStatus = this.lockStatus == 0 ? 1 : 0;
            },
            unLockScreen() {
                globalService.ScreenUnLock();
                this.isLocked = false;
                this.lockStatus = 0;
            },
            getCurrentHourAmount() {
                let clock = this.clock;
                let found = window.rate.basicRate.value.find(item => {
                    return item.name == dayjs(clock).format("HH");
                })
                this.currentHourAmount = found.value;
            },
            downlongtap() {
                // this.$router.push('/large-dose/common')
                return false;
            }
        },
        created(){
            this.clock = dayjs().add(window.machine.timeDiff || 0, 'seconds');
        },
        mounted() {
            this.getCurrentHourAmount();
            this.interval = setInterval(function () {
                this.getCurrentHourAmount();
                let stillMinutes = dayjs().diff(dayjs(window.dose.squareWare.createAt), 'minute'); // 持续了时间
                this.squareWareLeaveTime = window.dose.squareWare.minutes - parseInt(stillMinutes);
            }.bind(this), 1000)
        }
    };
</script>

<style lang="less">
.home-index {
    .battery {
        display: block;
        margin-top: 5%;

        i {
            font-size: 220%;
        }
    }

    .-key {
        display: block;
        text-align: right;

        i {
            font-size: 180%;
        }
    }

}
</style>
